// src/lib/tiptap-ssr.js
import { generateHTML } from "@tiptap/html"
import StarterKit from "@tiptap/starter-kit"
import TextAlign from "@tiptap/extension-text-align"
import Underline from "@tiptap/extension-underline"
import TaskList from "@tiptap/extension-task-list"
import TaskItem from "@tiptap/extension-task-item"
import Highlight from "@tiptap/extension-highlight"
import Image from "@tiptap/extension-image"
import Typography from "@tiptap/extension-typography"
import Superscript from "@tiptap/extension-superscript"
import Subscript from "@tiptap/extension-subscript"
import Link from "@tiptap/extension-link"

export default function RenderedTiptapContent({ content, className = "" }) {
  const html = generateHTML(content, [
    StarterKit,
    TextAlign.configure({ types: ["heading", "paragraph"] }),
    Underline,
    TaskList,
    TaskItem.configure({ nested: true }),
    Highlight.configure({ multicolor: true }),
    Image,
    Typography,
    Superscript,
    Subscript,
    Link.configure({
      openOnClick: false,
      HTMLAttributes: {
        target: "_blank",
        rel: "noopener noreferrer",
        class: "text-blue-600 underline hover:opacity-80",
      },
    }),
  ])
  return ( <div className={`prose tiptap select-text caret-black bg-white ${className}`} dangerouslySetInnerHTML={{ __html: html }} /> )
}
